<template>
  <div>
    <Ttitle class="title"></Ttitle>
    <div style="height: 50px"></div>
    <div class="big_box">
      <div class="big_box_left">
        <div
          style="height: calc(100% - 50px); overflow: auto; position: relative"
          id="appScroll"
          ref="appScroll"
        >
          <div
            v-for="(ti, index) in TiType"
            :key="index + 1000000"
            :id="'TIXScroll' + index"
          >
            <div style="padding: 0 24px; display: flex" v-if="ti.length != 0">
              <span class="TI_title"
                >{{ ti[0].sum }}、{{ ti[0].qtype }}题
                <span
                  >（共{{ ti.length }}题，每题{{ 1 }}分，说明：{{
                    ti[0].qtype != "多选"
                      ? "选择一项正确答案"
                      : "选择所有正确的答案"
                  }}）</span
                >
              </span>
            </div>
            <div class="TI_number">
              <el-row>
                <el-col :span="4" v-for="item in ti" :key="item.tixu">
                  <div
                    class="TIClass"
                    @click="changeTi(item)"
                    :style="item.type"
                    :id="'TI-' + item.tixu"
                  >
                    {{ item.tixu }}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <!-- <div style="padding:0 24px;">
            <span class="TI_title">一、{{qtype}}题</span>
            <span>（共10题，每题1分，说明：选择一项正确答案）</span>
            
        </div>
        <div class="TI_number" id='appScroll'>
            <el-row>
                <el-col :span="4" v-for="item in TiType" :key="item.name">
                    <div class="TIClass" @click="changeTi(item)" :style="item.type" :id='"TI-"+item.name'>
                        {{item.tixu}}
                    </div>
                </el-col>
            </el-row>
        </div> -->
        <div class="Ti_foot">
          <div class="tICade">
            <div class="TIClass" style="background: #eee"></div>
            <span>未答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #f5a623"></div>
            <span>已答题</span>
          </div>
          <div class="tICade">
            <div class="TIClass" style="background: #175dff"></div>
            <span>当前题</span>
          </div>
        </div>
      </div>
      <div class="big_box_right">
        <div class="Ti_title">
          <span>{{ Current.qtype }}题</span>
        </div>
        <div class="Ti_content">
          <div class="Ti_Gan">
            <span style="display: inline-block; width: 98%"
              >{{ Current.name }}、{{ Current.stem }}
            </span>
            <div
              style="line-height: 150px; display: inline-block"
              v-if="Current.stem_img"
            >
              <!-- <img :src="Current.stem_img" style="100%;width:60%" alt="" /> -->
              <el-image
                style="width: 60%"
                :src="Current.stem_img"
                :preview-src-list="[Current.stem_img]"
              >
              </el-image>
            </div>
            <div class="Collection" @click="CollectionBoxClick">
              <i
                class="el-icon-star-on"
                v-if="isYes"
                @click="CollectionClick(Current)"
              ></i>
              <i
                class="el-icon-star-off"
                v-else
                @click="CollectionClick(Current)"
              ></i>
            </div>
          </div>

          <div>
            <el-radio-group
              v-model="daan"
              class="radio-group-box"
              @change="danChange(Current)"
              v-if="Current.qtype == '单选'"
              :disabled="disabled"
            >
              <div
                class="radio_box"
                v-for="(item, index) in Current.tiList"
                :key="index"
              >
                <el-radio
                  class="arrse"
                  :label="item.cred"
                  v-if="item.content_img"
                  >{{ item.cred }}
                  <img
                    style="max-width: 100px; max-height: 100px"
                    :src="item.content_img"
                    alt=""
                /></el-radio>
                <el-radio
                  class="arrse"
                  :label="item.cred"
                  v-else-if="item.content"
                  >{{ item.cred }} {{ item.content }}</el-radio
                >
              </div>
            </el-radio-group>
            <el-checkbox-group
              class="radio-group-box"
              v-if="Current.qtype == '多选'"
              v-model="checkList"
              @change="danChange(Current)"
              :disabled="disabled"
            >
              <div
                class="radio_box"
                v-for="(item, index) in Current.tiList"
                :key="index"
              >
                <el-checkbox :label="item.cred" v-if="item.content_img != ''">
                  <span class="arrse"
                    >{{ item.cred }}
                    <img
                      style="max-width: 100px; max-height: 100px"
                      :src="item.content_img"
                      alt=""
                  /></span>
                </el-checkbox>
                <el-checkbox :label="item.cred" v-else-if="item.content">
                  <span class="arrse"
                    >{{ item.cred }} {{ item.content }}</span
                  ></el-checkbox
                >
              </div>
            </el-checkbox-group>
            <el-radio-group
              v-model="daan"
              class="radio-group-box"
              @change="danChange(Current)"
              v-if="Current.qtype == '判断'"
              :disabled="disabled"
            >
              <div class="radio_box">
                <el-radio label="正确"
                  ><span class="fontsizer">正确</span></el-radio
                >
              </div>
              <div class="radio_box">
                <el-radio label="错误"
                  ><span class="fontsizer">错误</span></el-radio
                >
              </div>
            </el-radio-group>
            <div v-if="Current.qtype == '案例'" class="anliBox">
              <div v-for="(itemS, index) in Current.children" :key="itemS.id">
                <span
                  style="display: inline-block; width: 98%; margin-bottom: 20px"
                  >{{ itemS.qtype }}题、{{ itemS.stem }}</span
                >
                <div>
                  <el-radio-group
                    v-model="itemS.uanswer"
                    class="radio-group-box"
                    @change="danChange(itemS)"
                    v-if="itemS.qtype == '单选'"
                    :disabled="disabled"
                  >
                    <div
                      class="radio_box"
                      v-for="(item, index) in itemS.childrenti"
                      :key="index"
                    >
                      <el-radio
                        class="arrse"
                        :label="item.cred"
                        v-if="item.content_img"
                        >{{ item.cred }} <img :src="item.content_img"
                      /></el-radio>
                      <el-radio
                        class="arrse"
                        :label="item.cred"
                        v-else-if="item.content"
                        >{{ item.cred }} {{ item.content }}</el-radio
                      >
                    </div>
                  </el-radio-group>
                  <el-checkbox-group
                    class="radio-group-box"
                    v-if="itemS.qtype == '多选'"
                    v-model="itemS.checkList"
                    @change="danChange(itemS)"
                    :disabled="disabled"
                  >
                    <div
                      class="radio_box"
                      v-for="(item, index) in itemS.childrenti"
                      :key="index"
                    >
                      <el-checkbox
                        class="arrse"
                        :label="item.cred"
                        v-if="item.content"
                        >{{ item.cred }} {{ item.content }}</el-checkbox
                      >
                    </div>
                  </el-checkbox-group>
                  <el-radio-group
                    v-model="itemS.uanswer"
                    class="radio-group-box"
                    @change="danChange(itemS)"
                    v-if="itemS.qtype == '判断'"
                    :disabled="disabled"
                  >
                    <div class="radio_box">
                      <el-radio class="arrse" label="正确">正确</el-radio>
                    </div>
                    <div class="radio_box">
                      <el-radio class="arrse" label="错误">错误</el-radio>
                    </div>
                  </el-radio-group>
                </div>
                <div
                  class="daan_box"
                  style="margin-top: 0"
                  v-if="(isDaAnShow && isDaAn) || isDaAnAll"
                >
                  <span> 第{{ index + 1 }}题答案:{{ itemS.answer }} </span>
                  <p v-if="itemS.analysis">
                    第{{ index + 1 }}题解析:{{ itemS.analysis }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              margin-top: 44px;
              padding: 0 8px;
              display: flex;
              justify-content: space-between;
            "
          >
            <div>
              <el-button
                @click="changeClick('del')"
                style="margin-right: 30px"
                type="primary"
                :disabled="updisabled"
                >上一题</el-button
              >
              <el-button
                @click="changeClick('add')"
                style="margin-right: 60px"
                type="primary"
                :disabled="downdisabled"
                >下一题</el-button
              >
              <el-button
                type="danger"
                v-if="!isDaAnAll"
                @click="beiti"
                style="margin-left: 130px"
                >背题模式</el-button
              >
              <el-button
                type="success"
                v-else
                @click="zuoti"
                style="margin-left: 130px"
                >做题模式</el-button
              >
              <el-button type="warning" @click="commit">退出</el-button>
            </div>
            <el-button @click="backVisible = true" class="questionBack"
              >问题反馈</el-button
            >
          </div>
          <div
            class="daan_box"
            v-if="
              ((isDaAnShow && isDaAn) || isDaAnAll) && Current.qtype != '案例'
            "
          >
            <span> 答案:{{ Current.answer }} </span>
            <p v-if="Current.analysis">解析:{{ Current.analysis }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 问题反馈 -->
    <el-dialog
      title="问题反馈"
      :visible.sync="backVisible"
      width="440px"
      :before-close="handleClose"
    >
      <div>
        <el-select v-model="errorType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <el-input
          class="info"
          type="textarea"
          :rows="4"
          placeholder="请输入您要反馈的试题问题"
          v-model="feedbackInfo"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="backVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="buttonLoad" @click="errorBack"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Ttitle from "./title.vue";
import {
  exerAdd,
  exerCollect,
  exerdelCollect,
  feedbackQuestion,
} from "@/api/admin.js";
import { getTi, delTi, getapplyid } from "@/utils/auth.js";
export default {
  data() {
    return {
      buttonLoad: false,
      errorType: "",
      options: ["题干缺失", "答案错误", "用户体验", "其他"],
      nowQuestion: "",
      feedbackInfo: "",
      backVisible: false,
      //#175DFF  当前
      Tistyle: {
        background: "#eee",
        color: "#000",
      }, //未答题样式
      DQTistyle: {
        background: "#175DFF",
        color: "#FFF",
      }, //当前题样式
      YDTistyle: {
        background: "#F5A623",
        color: "#FFF",
      }, //已答题题样式
      DQTI: {}, //当前题信息
      TIXU: 1, //题序
      daan: "", //答题  单选
      Current: {
        mame: "1",
        stem: "",
        tiList: [],
        answer: "",
        analysis: "",
        id: "",
        qtype: "",
      },
      updisabled: true,
      downdisabled: false,
      commitData: [], //用户答案  提交时传给后台
      isDaAn: false, //是否显示答案  默认不显示 在答题后显示
      isDaAnShow: false, //是否答题
      isDaAnAll: false, //展示全部答案
      Ti: [], //所有试题
      DXTi: [], //单选题
      MOTi: [], //单选题
      PDTi: [], //判断题
      ALTi: [], //案例题
      TiType: [], //试题题型 单选题  单选题  判断题
      exerid: this.$route.query.exerid,
      checkList: [], //多选的vuelue
      isYes: false, //默认不收藏
      Collectionlist: [], //收藏得全部试题
      subjectid: this.$route.query.subjectid, //专业id
      jjtc: true,
      disabled: false, //禁用答题
    };
  },
  components: {
    Ttitle,
  },
  watch: {
    TIXU(val) {
      this.styleChange(val);
    },
  },
  computed: {
    // ...mapGetters(['Ti']),//所有试题
    qtype: function () {
      return this.Ti[0].qtype;
    },
  },
  created() {
    this.isDaAn = this.$route.query.daan == "显示"; //显示答案
    let arr = getTi();
    arr.map((item, index) => {
      if (item.qtype == "单选") {
        item.tiTY = 1;
        this.DXTi.push(item);
      }
      if (item.qtype == "多选") {
        item.tiTY = 2;
        this.MOTi.push(item);
      }
      if (item.qtype == "判断") {
        item.tiTY = 3;
        this.PDTi.push(item);
      }
      if (item.qtype == "案例") {
        item.tiTY = 4;
        this.ALTi.push(item);
      }
    });
    this.Ti = arr.sort((a, b) => {
      return a.tiTY - b.tiTY;
    });
    this.Ti.map((item, index) => {
      item.name = index + 1; //加入题序
      if (item.uanswer) {
        this.commitData.push({
          questionid: item.id,
          uanswer: item.uanswer,
          scored: item.scored,
          qtype: item.qtype,
        });
        // this.TIXU = item.name;
      }
      if (this.$route.query.progress && this.$route.query.progress == item.id) {
        this.TIXU = item.name;
      }
      if (item.collected) {
        //收藏过的试题
        this.Collectionlist.push({ questionid: item.id, isYes: true });
      }
    });
    let A = true;
    let B = true;
    let C = true;
    let D = true;
    if (this.DXTi.length != 0) {
      this.DXTi.map((item, index) => {
        item.tixu = index + 1;
      });
    } else {
      A = false;
    }
    if (this.MOTi.length != 0) {
      this.MOTi.map((item, index) => {
        item.tixu = this.DXTi.length + index + 1;
      });
    } else {
      B = false;
    }
    if (this.PDTi.length != 0) {
      this.PDTi.map((item, index) => {
        item.tixu = this.MOTi.length + this.DXTi.length + index + 1;
      });
    } else {
      C = false;
    }
    if (this.ALTi.length != 0) {
      this.ALTi.map((item, index) => {
        item.tixu =
          this.MOTi.length + this.DXTi.length + this.PDTi.length + index + 1;
      });
    } else {
      D = false;
    }
    this.TiType.push(this.DXTi, this.MOTi, this.PDTi, this.ALTi);
    let sum = 1;
    this.TiType.map((item) => {
      if (item.length != 0) {
        item[0].sum = sum++;
      }
    });
    if (this.Ti.length <= 100) {
      if (A) {
        this.DQTI = this.TiType[0][0];
      } else if (B) {
        this.DQTI = this.TiType[1][0];
      } else if (C) {
        this.DQTI = this.TiType[2][0];
      } else if (D) {
        this.DQTI = this.TiType[3][0];
      }
      this.Current.qtype = this.DQTI.qtype;
      this.styleChange(this.DQTI.tixu);
    } else {
      if (this.TIXU != 1) {
        this.updisabled = false;
      } else if (this.TIXU != this.Ti.length) {
        this.downdisabled = false;
      } else {
        this.updisabled = false;
        this.downdisabled = false;
      }
      this.styleChange(this.TIXU);
    }
    document.addEventListener("keydown", this.returnF5Code);
  },
  mounted() {
    //锚点定位
    this.$nextTick(() => {
      let index;
      if (this.Current.qtype == "单选") {
        index = 0;
      } else if (this.Current.qtype == "多选") {
        index = 1;
      } else {
        index = 2;
      }
      // console.log(document.getElementById("TIXScroll"+index))
      // document.getElementById("TI-"+this.TIXU).offsetParent = document.getElementById('appScroll')
      document.querySelector("#appScroll").scrollTop =
        document.getElementById("TIXScroll" + index).offsetTop +
        document.getElementById("TI-" + this.TIXU).offsetTop;
    });
  },
  methods: {
    handleClose() {
      this.errorType = "";
      this.backVisible = false;
    },
    //问题反馈
    errorBack() {
      if (this.feedbackInfo == "") {
        return this.$message.error("反馈内容不得为空");
      }
      let obj = JSON.parse(JSON.stringify(this.Current));
      this.buttonLoad = true;
      feedbackQuestion({
        category: this.errorType,
        qtype: obj.qtype,
        question_id: obj.id,
        question_info: this.nowQuestion,
        reason: this.feedbackInfo,
      }).then((res) => {
        if (res.code == 200) {
          this.buttonLoad = false;
          this.$message.success("反馈成功!");
          this.backVisible = false;
          this.errorType = "";
          this.feedbackInfo = "";
        }
      });
    },
    //背题模式
    beiti() {
      this.isDaAnAll = true;
      this.jjtc = false;
      this.disabled = true;
    },
    zuoti() {
      this.isDaAnAll = false;
      this.jjtc = true;
      this.disabled = false;
    },
    //样式切换
    styleChange(val) {
      this.Ti.map((item) => {
        item.type = this.Tistyle;
        this.commitData.map((element) => {
          if (item.id == element.questionid) {
            item.type = this.YDTistyle;
          }
        });
        if (Number(item.name) == val) {
          item.type = this.DQTistyle;
          this.DQTI = item;
          this.funChangeTi(item);
        }
      });
    },
    //点击题号切换试题
    changeTi(item) {
      this.DQTI = item;
      this.TIXU = item.name;
      this.funChangeTi(item);
      this.changeClick();
      this.$forceUpdate();
    },
    //按钮切换试题
    changeClick(data) {
      this.updisabled = false;
      this.downdisabled = false;
      if (!this.downdisabled && data == "add") {
        this.TIXU = Number(this.DQTI.name) + 1;
      }
      if (!this.updisabled && data == "del") {
        this.TIXU = Number(this.DQTI.name) - 1;
      }
      if (this.Ti.length == Number(this.TIXU)) {
        this.downdisabled = true;
      }
      if (Number(this.TIXU) == 1) {
        this.updisabled = true;
      }
      this.$forceUpdate();
    },
    //试题信息  切换试题时  触发此函数
    funChangeTi(item) {
      this.nowQuestion = JSON.stringify(item);
      let Arr = [];
      Arr.push(
        {
          cred: "A",
          content: item.a,
          content_img: item.a_img,
        },
        {
          cred: "B",
          content: item.b,
          content_img: item.b_img,
        },
        {
          cred: "C",
          content: item.c,
          content_img: item.c_img,
        },
        {
          cred: "D",
          content: item.d,
          content_img: item.d_img,
        },
        {
          cred: "E",
          content: item.e,
          content_img: item.e_img,
        },
        {
          cred: "F",
          content: item.f,
          content_img: item.f_img,
        }
      );
      if (item.children) {
        item.children.map((el) => {
          if (!el.checkList || el.checkList.length == 0) {
            el.checkList = [];
          }
          if (!el.childrenti) {
            el.childrenti = [
              {
                cred: "A",
                content: el.a,
                content_img: el.a_img,
              },
              {
                cred: "B",
                content: el.b,
                content_img: el.b_img,
              },
              {
                cred: "C",
                content: el.c,
                content_img: el.c_img,
              },
              {
                cred: "D",
                content: el.d,
                content_img: el.d_img,
              },
              {
                cred: "E",
                content: el.e,
                content_img: el.e_img,
              },
              {
                cred: "F",
                content: el.f,
                content_img: el.f_img,
              },
            ];
          }
        });
      }
      this.Current = {
        name: item.name,
        stem: item.stem,
        tiList: Arr,
        answer: item.answer,
        analysis: item.analysis,
        id: item.id,
        qtype: item.qtype,
        stem_img: item.stem_img,
        children: item.children ? item.children : null,
      };

      //每次切换试题都要重新填写用户相对应的答案
      this.daan = "";
      this.checkList = [];
      // this.isDaAn=false
      this.commitData.map((ite) => {
        if (ite.questionid == item.id) {
          this.daan = ite.uanswer;
          this.checkList = ite.uanswer.split("");
          // this.isDaAn=true
        }
      });
      this.isYes = false;
      this.Collectionlist.map((itemA) => {
        if (itemA.questionid == item.id) {
          this.isYes = true;
        }
      });
      // console.log(this.Collectionlist);
      this.isDaAnShow = false;
      this.commitData.map((itemA) => {
        if (itemA.questionid == item.id) {
          this.isDaAnShow = true;
        }
      });
      this.$forceUpdate();
    },
    //退出
    goback() {
      this.$router.push("/practice/index");
    },
    //答题时 单选
    danChange(data) {
      let obj = JSON.parse(JSON.stringify(data));
      if (data.qtype == "多选") {
        this.daan = this.checkList.sort().join("");
      }
      if (this.Current.qtype == "案例" && data.qtype == "多选") {
        obj.uanswer = obj.checkList.sort().join("");
      }
      let scored; //是否正确   对 1 错 0
      if (data.answer == this.daan) {
        scored = 1;
      } else {
        scored = 0;
      }
      var isyes = false;
      this.commitData.map((item) => {
        if (this.commitData.length == 0 || item.questionid == data.id) {
          isyes = true;
          item.uanswer = this.Current.qtype == "案例" ? obj.uanswer : this.daan;
          item.scored = scored;
          item.qtype = data.qtype;
        }
      });
      if (!isyes) {
        this.commitData.push({
          questionid: data.id,
          uanswer: this.Current.qtype == "案例" ? obj.uanswer : this.daan,
          scored,
          qtype: data.qtype,
        });
        // this.isDaAn = true
      }
      this.isDaAnShow = false;
      this.commitData.map((itemA) => {
        if (itemA.questionid == data.id) {
          this.isDaAnShow = true;
        }
      });
      this.$forceUpdate();
    },
    //阻止按键刷新
    returnF5Code(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      if (code > 111 && code < 123) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
        }
      }
    },
    //commit 答题记录
    async commit() {
      this.isDaAnAll = true;
      this.jjtc = false;
      if (this.commitData.length == 0)
        return this.$router.push("/practice/index");
      await exerAdd(this.exerid, {
        exerlog: JSON.stringify(this.commitData),
        progress: this.DQTI.id,
      }).then((res) => {
        this.$router.push("/practice/index");
      });
    },
    //收藏 取消收藏
    CollectionClick(data) {
      var isyes = false;
      // return
      this.Collectionlist.map((item, index) => {
        if (this.Collectionlist.length == 0 || item.questionid == data.id) {
          isyes = true;
          delete this.Collectionlist[index];
          exerdelCollect({
            subjectid: this.subjectid,
            questionid: data.id,
            applyid: getapplyid(),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("取消成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
      if (!isyes) {
        this.Collectionlist.push({ questionid: data.id, isYes: true });
        exerCollect({
          subjectid: this.subjectid,
          questionid: data.id,
          applyid: getapplyid(),
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("收藏成功");
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //收藏控制器
    CollectionBoxClick() {
      this.isYes = !this.isYes;
      this.DQTI;
    },
  },
  async beforeDestroy() {
    // this.commit(this.commitData)
    document.removeEventListener("keydown", this.returnF5Code);
    if (this.jjtc && this.commitData.length != 0) {
      await exerAdd(this.exerid, {
        exerlog: JSON.stringify(this.commitData),
        progress: this.DQTI.id,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-select {
    width: 100% !important;
    margin-bottom: 20px;
    .el-input__inner {
      border: none;
      background: #f7f7f7;
    }
  }
  .info {
    width: 100% !important;

    .el-textarea__inner {
      resize: none;
      background: #f7f7f7;
      border: none;
    }
  }
}
.questionBack {
  color: #327bff;
  border-color: #327bff;
}
.big_box {
  width: 100%;
  height: calc(100vh - 50px);
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  padding: 24px;
  // margin-top:50px;
  .big_box_left {
    width: 370px;
    height: 100%;
    background: #fff;
    padding: 24px 0;
    position: relative;
    .TI_title {
      font-weight: 600;
    }
    .Ti_foot {
      position: absolute;
      bottom: 0;
      height: 80px;
      width: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tICade {
        display: flex;
        align-items: center;
      }
      .TIClass {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }
    }
  }
  .big_box_right {
    flex: 1;
    height: 100%;
    background: #fff;
    margin-left: 24px;
    .Ti_title {
      width: 100%;
      display: flex;
      justify-content: center;
      span {
        display: flex;
        padding: 24px;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .Ti_content {
      // width: 100%;
      padding: 0 50px;
      font-size: 26px;
      .Ti_Gan {
        // margin-bottom: 32px;
        position: relative;
        .Collection {
          position: absolute;
          top: 0;
          right: 0;
          cursor: pointer;
          .el-icon-star-on:before {
            color: #f5a623;
          }
        }
      }
      .radio-group-box {
        padding: 0 20px;
      }
      .radio_box {
        font-size: 20px;
        padding-bottom: 16px;
        ::v-deep {
          .arrse {
            width: 65vw;
            word-break: break-all !important;
            white-space: normal !important;
          }
          .el-radio__label,
          .el-checkbox__label {
            font-size: 20px;
            word-break: break-all !important;
            white-space: normal !important;
          }
          .fontsizer {
            font-size: 20px;
          }
          .el-radio__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 8px;
              height: 8px;
            }
          }
          .el-checkbox__inner {
            width: 20px;
            height: 20px;
            &::after {
              width: 5px;
              height: 9px;
              left: 6px;
            }
          }
          .el-radio__input {
            margin-top: -5px;
          }
        }
      }
      .daan_box {
        margin-top: 50px;
        padding: 20px 36px;
        background: #eeeeee;
        span {
          font-size: 18px;
        }
        p {
          margin: 0;
          font-size: 18px;
        }
      }
    }
  }
}
.button_color {
  background: #eee;
  // color:#fff;
}
.TI_number {
  padding: 0 24px;
  padding-top: 10px;
  max-height: calc(100% - 100px);

  .TIClass {
    width: 40px;
    height: 40px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
  }
}
::v-deep {
  :root {
    min-height: 680px;
  }
  .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #333;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
    &::after {
      border-color: #ffffff !important;
    }
  }
  .is-disabled + span.el-radio__label {
    color: #333;
  }
  .is-disabled .el-radio__inner {
    border-color: #dcdfe6 !important;
    background-color: #ffffff !important;
    &::after {
      background-color: #ffffff !important;
    }
  }
  .is-disabled .is-checked .el-radio__inner {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
  }
}
.anliBox {
  max-height: 420px;
  overflow: auto;
}
</style>
